<template>
  <div class="download-box">
    <top-nav/>
    <div class="container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="1" v-for="(item,index) in down" :key="index" class="mb20 box-border">
          <div class="hover-box item box-border">
            <div class="t0">{{item.fileName}}</div>
            <div class="t1">{{item.fileNameAll}}</div>
            <div class="down-btn">
              <span @click="downloadFile(item)">下载</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import topNav from '@/components/topNav'
import axios from 'axios';
export default {
  components: {
    topNav
  },
  data() {
    return {
      down: [
        {
          fileName: '参考手册',
          fileNameAll: 'Javascript参考手册',
          filePath: '/chm/Javascript参考手册.chm'
        },
        {
          fileName: '核心手册',
          fileNameAll: 'JavaScript核心参考手册',
          filePath: '/chm/JavaScript核心参考手册.chm'
        },
        {
          fileName: '教程',
          fileNameAll: 'javascript教程',
          filePath: '/chm/javascript教程.chm'
        },
        {
          fileName: '源码大全',
          fileNameAll: 'javascript源码大全',
          filePath: '/chm/javascript源码大全.chm'
        }
      ]
    }
  },
  methods: {
    downloadFile(item) {
      if (item.filePath == '/chm/web.zip') {
        // type: 'application/octet-stream'
        axios({
          url: item.filePath,
          responseType: 'blob'
        }).then(res => {
          let blob = new Blob([res.data], {
            type: 'application/zip'
          }); 
          let downloadElement = document.createElement('a');
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          let time = (new Date()).valueOf();
          downloadElement.download = item.fileName+time + '.zip'; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
      } else {
        window.open(item.filePath)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.download-box{
  padding: 1px;
  box-sizing: border-box;
  .container{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    .item{
      position: relative;
      .t0{
        height: 100px;
        font-size: 28px;
        font-weight: 600;
        color: #999;
        text-align: center;
        line-height: 100px;
      }
      .t1{
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .down-btn{
        padding: 5px;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        border-radius: 4px;
        color: #fff;
      }
      &:hover{
        .down-btn{
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>